<template>
  <view class="content">
    <!-- 搜索手机号 -->
    <u-sticky>
      <view class="usersearch">
        <u-search
          placeholder="手机号查询订单"
          v-model="phonenumber"
          input-align="center"
          clearabled="true"
          animation="true"
          @custom="usersearchclick(phonenumber)"
          @clear="handleClear()"
          @change="handleChange(phonenumber)"
        ></u-search>
      </view>
    </u-sticky>
    <view>
      <!-- 空 -->
      <view class="" v-if="orderlist.length === 0">
        <u-empty></u-empty>
      </view>
      <view v-else class="warehousing_list">
        <view
          class="warehousing_item"
          v-for="(item, index) in orderlist"
          :key="index"
        >
          <!-- 复选框 -->

          <checkbox-group @change="changeitem(item)" checked class="checkbox"
            ><checkbox :checked="item.checked"
          /></checkbox-group>

          <view class="warehousing_itemtop">
            <text>订单号{{ item.order_id }}</text>
          </view>
          <view
            class="warehousing_itemcontent"
            @click="orderlistdetails(item.id)"
          >
            <view class="warehousing_content">
              <text>会员卡标题:</text
              ><text v-if="item.usercardrecharge.titile">{{
                item.usercardrecharge.titile
              }}</text>
              <text v-else>--</text>
            </view>
            <view class="warehousing_content">
              <text>购物类型:</text><text>{{ item.type_text }}</text>
            </view>
            <view class="warehousing_content">
              <text>支付类型:</text><text>{{ item.pay_type_text }}</text>
            </view>
            <view class="warehousing_content">
              <text>支付状态:</text><text>{{ item.pay_status_text }}</text>
            </view>
            <view class="warehousing_content">
              <text>订单状态:</text><text>{{ item.order_status_text }}</text>
            </view>
            <view class="warehousing_content">
              <text>是否折上折:</text><text>{{ item.is_discount_text }}</text>
            </view>
            <view class="warehousing_content">
              <text>折上折幅度:</text><text>{{ item.discount }}</text>
            </view>
            <view class="warehousing_content">
              <text>抹零:</text><text>{{ item.zero }}</text>
            </view>
            <view class="warehousing_content">
              <text>特价:</text><text>{{ item.tejia_text }}</text>
            </view>
            <view style="color: red" class="warehousing_content">
              <text>会员价:</text><text>{{ item.is_vip_text }}</text>
            </view>
            <view class="warehousing_content">
              <text>订单金额:</text><text>{{ item.money }}</text>
            </view>
            <view class="warehousing_content">
              <text>订单原价:</text><text>{{ item.order_money }}</text>
            </view>
            <view class="warehousing_content">
              <text>收款人:</text><text>{{ item.admin.truename }}</text>
            </view>
            <view class="warehousing_content">
              <text>提成结算状态:</text
              ><text>{{ item.settlement_status_text }}</text>
            </view>
            <view class="warehousing_content">
              <text>创建时间:</text><text>{{ item.createtime_text }}</text>
            </view>
            <view class="warehousing_content">
              <text>最终完成时间:</text>

              <text v-if="item.finish_time != 0 && item.type == 1">{{
                item.finish_time_text
              }}</text>
              <text v-if="item.finish_time != 0 && item.type == 2">{{
                item.finish_time_text
              }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 加载中 -->
      <text class="loading-text">
        {{
          loadingType === 0
            ? contentText.contentdown
            : loadingType === 1
            ? contentText.contentrefresh
            : contentText.contentnomore
        }}
      </text>
    </view>
    <!-- 打印小票 -->
    <view class="jiesuan">
      <view class="pay-btn">
        <checkbox-group style="margin-right: 20rpx" @change="selectAll"
          ><checkbox :checked="allChecked">全选</checkbox></checkbox-group
        >

        <u-button
          @click="handlePrint()"
          type="primary"
          shape="circle"
          size="medium"
          >打印小票</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
var pageIndex = 1;

export default {
  data() {
    return {
      checkList: [], //选中值
      allChecked: false, //是否全选
      // 手机号
      phonenumber: "",
      // 订单列表
      orderlist: [],
      loadingType: 0,
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: "正在加载...",
        contentnomore: "没有更多数据了",
      },
    };
  },
  onLoad() {
    // 原有列表
    this.getOrderList();
  },
  /*下拉刷新*/
  onPullDownRefresh() {
    this.getOrderList();
  },
  onReachBottom() {
    this.getMoreOrderList();
    console.log("滚到到底部了");
  },
  mounted() {},
  methods: {
    // 打印小票
    handlePrint() {
      console.log("打印小票");
      var that = this;

      that.checkList = [];
      that.orderlist.map((item) => {
        if (item.checked) {
          return that.checkList.push(item.id);
        }
      });
      uni.showModal({
        title: "提示",
        content: "确认打印小票吗?",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            uni.request({
              url: "http://gxyckf.1qit.com/api/admin.order/printOrder", //仅为示例，并非真实接口地址。
              data: {
                id: that.checkList,
              },
              method: "POST",
              header: {
                token: uni.getStorageSync("token"),
              },
              success: (res) => {
                if (res.data.code == 0) {
                  uni.showToast({
                    title: res.data.msg,
                    icon: "error",
                    duration: 2000,
                  });
                } else if (res.data.code == 1) {
                  uni.showToast({
                    title: res.data.msg,
                    icon: "success",
                    duration: 2000,
                  });
                  that.getOrderList();
                }
              },
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },

    //单选
    changeitem(item) {
      console.log(item);
      // item.store_clear_id;
      item.checked = !item.checked;
      if (!item.checked) {
        this.allChecked = false;
      } else {
        // 判断每一个商品是否是被选择的状态
        const cartList = this.orderlist.every((item) => {
          return item.checked === true;
        });
        if (cartList) {
          this.allChecked = true;
        } else {
          this.allChecked = false;
        }
      }
    },
    //全选，全不选
    selectAll() {
      this.allChecked = !this.allChecked;
      if (this.allChecked) {
        this.orderlist.map((item) => {
          item.checked = true;
        });
      } else {
        this.orderlist.map((item) => {
          item.checked = false;
        });
      }
    },
    // 点击清除事件
    handleClear() {
      console.log("清空");
      this.getOrderList();
    },
    // 输入框改变事件
    handleChange(phonenumber) {
      const that = this;
      pageIndex = 1;
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.order/list", //仅为示例，并非真实接口地址。
        data: {
          page: pageIndex,
          // 订单状态
          // status:
          // 手机号
          mobile: phonenumber,
          // 支付方式
          // paytype
        },
        method: "POST",
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          console.log(res.data.data);
          // 给每一项加一个属性

          that.orderlist = res.data.data.data;

          uni.hideNavigationBarLoading();
          uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
        },
      });
    },
    //查看订单列表(原有)
    getOrderList() {
      const that = this;
      pageIndex = 1;
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.order/list", //仅为示例，并非真实接口地址。
        data: {
          page: pageIndex,
          // 订单状态
          // status:
          // 手机号
          // mobile
          // 支付方式
          // paytype
        },
        method: "POST",
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          console.log(res.data.data);
          // 给每一项加一个属性

          that.orderlist = res.data.data.data;
          that.orderlist.forEach((item) => {
            this.$set(item, "checked", false);
          });
          console.log(that.orderlist);

          uni.hideNavigationBarLoading();
          uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
        },
      });
    },
    // 查看待清洗列表(加载更多)
    getMoreOrderList() {
      // 加载更多列表
      const that = this;
      pageIndex++;
      if (that.loadingType != 0) {
        return false; //loadingType!=0;直接返回
      }
      that.loadingType = 1;
      uni.showNavigationBarLoading();
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.order/list",
        method: "POST",
        data: {
          page: pageIndex,
          // 订单状态
          // status:
          // 手机号
          // mobile
          // 支付方式
          // paytype
        },
        header: {
          token: uni.getStorageSync("token"),
        },
        success(res) {
          if (that.orderlist.length == res.data.data.total) {
            that.loadingType = 2;
            uni.hideNavigationBarLoading(); //关闭加载动画
            return false;
          }
          that.orderlist = that.orderlist.concat(res.data.data.data);
          that.loadingType = 0; //将loadingType归0重置
          uni.hideNavigationBarLoading(); //关闭加载动画
        },
      });
    },
    //根据手机号搜索订单
    usersearchclick(phonenumber) {
      console.log(phonenumber);
      const that = this;
      pageIndex = 1;
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.order/list", //仅为示例，并非真实接口地址。
        data: {
          page: pageIndex,
          // 订单状态
          // status:
          // 手机号
          mobile: phonenumber,
          // 支付方式
          // paytype
        },
        method: "POST",
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          console.log(res.data.data);
          // 给每一项加一个属性

          that.orderlist = res.data.data.data;

          uni.hideNavigationBarLoading();
          uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
        },
      });
    },

    // 根据idj进入订单详情
    orderlistdetails(id) {
      uni.navigateTo({
        url: "../orderlistdetails/orderlistdetails?id=" + id,
      });
    },
  },
};
</script>

<style>
page {
  background: #f6f6f6;
}
.u-flex {
  display: flex !important;
}
.content_nav {
  width: 90%;
  margin-top: 1px;
  padding: 1% 5%;
  background: #fff;
}

.usersearch {
  width: 90%;
  padding: 2% 5%;
  background: #fff;
}
.warehousing_list {
  width: 90%;
  margin: 0 5%;
}
.warehousing_item {
  background: #fff;
  margin: 20rpx 0;
  border-radius: 10rpx;
  box-shadow: 2rpx 2rpx 10rpx #eee;
  padding: 20rpx;
  padding-bottom: 0;
}
.warehousing_itemtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.warehousing_itemtop text {
  flex: 1;
  font-weight: 700;
}
.warehousing_edit {
  width: 150rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.warehousing_itemcontent {
}
.warehousing_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #333;
}
.warehousing_content text:nth-child(1) {
}
.warehousing_content text:nth-child(2) {
  /* color: #9e9e9e; */
}
.loading-text {
  height: 80upx;
  line-height: 80upx;
  font-size: 25upx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.jiesuan {
  overflow: hidden;
  width: 100%;
  position: fixed;
  box-shadow: 0 0 20rpx #ccc;
  background: #fff !important;
  /* opacity: 0.8; */
  padding-top: 10rpx;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.pay-btn {
  text-align: right;
  justify-content: flex-end;
  padding-top: 30rpx;
  display: flex;
  align-items: center;
}
</style>
